/home/web6047/www/js/20210909-logicanalyzer/web6047document - snapshot 20210912.html

（すべてを選択しました。コピーはしてません）
<html><!--ESCAPEPROCESS-->
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script>
	console.clear();
	onclick = function() { location.reload( true ) }
	ondblclick = function() { location.assign( "https://192.168.11.3" + location.pathname ) }
</script>
<script src="a - snapshot 20210912.js"></script>
<script>
async function onloadx() {
	
	cc = document.getElementById( "test" ).getContext( "2d" );
		cc.canvas.width = 512;
		cc.canvas.height = 442;
	
	//上のタイミングチャート
	
	test();


	//下のタイミングチャート

	LA = new LogicAnalyzer( cc, {
		cellHeight : 32,
		palseHeight : 8,
		horizontalDiv : 2,
		horizontalShift : 100,
		bottom : 96,
	} );
	
	keys = new Array();
	onkeydown = function( e ) {
		if( keys.indexOf( e.which ) == -1 ) keys.push( e.which );
		LA.hi( "key", "press" );
	}
	onkeyup = function( e ) {
		LA.low( "key", "release" );
		LA.stop();
		let idx = keys.indexOf( e.which );
		if( idx != -1 ) keys.splice( idx, 1 );
	}
	frame();
}
function frame() {
	LA.hi( "frame" );
	for( let key of keys ) {
		senseKey( key );
	}
	if( 1 ) requestAnimationFrame( frame );
	else setTimeout( frame, 100 );
	LA.low( "frame" );
}
function senseKey( key ) {
	console.log( key );
}

function test() {
	LA2 = new LogicAnalyzer( cc, {
		cellHeight : 48,
		palseHeight : 8,
		horizontalDiv : 0.2,
		horizontalShift : 10,
		bottom : 192,
	} );
	
	LA2.hi( "parent func 'test()'", "called async func" );
	story();
	LA2.low( "parent func 'test()'", "returned from async func" );
}
async function story() {

	LA2.hi( "async func 'story()'", "await" );

	await new Promise( function( sigotoOk ) {
		setTimeout( sigotoOk, 50 );
	} );

	LA2.low( "async func 'story()'", "resolved" );
	LA2.stop();
}

</script>
<style>
</style>
</head>
<body onload="onloadx()">
	<canvas id="test" style="
		border : solid 1px black;
	">
	</canvas><BR>
	キーボードのキーを１回チョンと押すと、キーの動きを表示します。<BR>
	（連打はできますが、長押しするとうまく動きません）
</body>
</html>